<template>
	<cu-custom  bgColor="bg-gray" :isBack="isBack">
		<template #content>Session List</template>
	</cu-custom>
	<view class="container">
		<view class="list-item" v-for="(item, index) in list" :key="index" @click="itemClick(item)">
			<view class="item-title">{{item.stationName}}</view>
			<view class="status-content">
				<view class="status-around" :style="{ backgroundColor: item.statusColor }"></view>
				<view class="status-text" :style="{ color: item.statusColor }">{{item.state}}</view>
			</view>
			<view class="item-line"></view>
		
			<view class="line-content">
				<view class="line-left">
					<image class="icon-image" src="/static/session_start_time.png"></image>
					<view style="margin-left: 8rpx;">Start time</view>
				</view>
				<view class="line-right">{{item.chargeStartTime}}</view>
			</view>
			
			<view class="line-content">
				<view class="line-left">
					<image class="icon-image" src="/static/session_cost.png"></image>
					<view style="margin-left: 8rpx;">Total fee</view>
				</view>
				<view class="line-right" style="color: #466EFF;">{{item.cost}} {{item.currency}}</view>
			</view>

		</view>

		<!-- 上拉加载提示 -->
		<view v-if="loading" class="loading">Loading...</view>
		<view v-else-if="noMore" class="no-more">No more data</view>
	</view>
</template>

<script>
	// 则导入时需要使用命名导入
	import   http  from '@/invoice/utils/request.js';
	import { FormatUTCDateToLocal, AddAndRound, ConvertCurrencyCodeToSymbol, CoverColorWithStatus } from '@/invoice/utils/tool.js';
	import cuCustom from '@/colorui/components/cu-custom.vue';
	export default {
		components: {
		    cuCustom
		},
		data() {
			return {
				isBack:true,
				list: [],
				page: 1,
				pageSize: 10,
				loading: false,
				noMore: false
			}
		},
		onPullDownRefresh() {
			console.log("我下啦刷新了")
		    // 下拉刷新
		    this.refresh();
		},
		onReachBottom() {
		    // 上拉加载更多
			console.log("我上拉加载更多啦")
		    this.loadMore();
		},
		// 页面加载时触发（uni-app 生命周期）
		onLoad(options) {
			console.log(options.POS)
		    // ✅ 接收上一页传来的参数
		    this.POS = options.POS || '';
		    this.routeParams = options; // 保存原始参数
		    // 🔍 打印到控制台（开发者工具）
		    console.log('Received params:', options);
			this.loadData();
		},
		
		methods: {
			
			itemClick(item) {
				console.log(item.transactionId)	
				const  transactionId = item.transactionId || ""
				// ✅ 跳转到下一页，并携带参数（可选）
				uni.navigateTo({
					url: '/pages/index/index?transactionId=' + transactionId,
					success: () => {
					  console.log('Navigation successful');
					},
					fail: (err) => {
					  console.error('Navigation failed:', err);
					  uni.showToast({ title: 'Navigation failed', icon: 'none' });
					}
				});
			},
			
			
			loadData(){
				let that = this;
				http.get('charge/session/list', {
					"pageNum": this.page,
					"reasonable": false,
					"pageSize": this.pageSize,
					"idTag": this.POS
				}, 
				{ showLoading: false }) // 显式指定显示加载中
				.then(data => {
					console.log('request success:', data);
					var rows = data.rows
					if (rows.length === 0) {
					  this.noMore = true;
					} else {
						if (this.isRefresh){
							this.list = []
						}
						rows.forEach(function(detail) {
							detail.chargeStartTime = FormatUTCDateToLocal(detail.chargeStartTime,'MM/DD HH:mm') 
							detail.cost = AddAndRound(detail.energyCost,detail.idleCost)
							detail.currency = ConvertCurrencyCodeToSymbol(detail.currency)
							detail.statusColor = CoverColorWithStatus(detail.state)
							console.log("detail.statusColor = " + detail.statusColor)
							that.list.push(detail)
						}, this);
					}
					this.loading = false;
					this.isRefresh = false
					this.isLoadMore = false
					uni.stopPullDownRefresh(); // 停止下拉刷新动画（即使不是下拉触发也要调用，以防万一）
				}).catch(error => {		
				    console.error('request fail:', error);
					if(this.isLoadMore){
						this.page--
					}
					this.loading = false;
					this.isRefresh = false
					this.isLoadMore = false
					uni.stopPullDownRefresh(); // 停止下拉刷新动画（即使不是下拉触发也要调用，以防万一）
				});
			},
			
			// 下拉刷新
			refresh() {
				this.page = 1;
				this.isRefresh = true
				this.noMore = false;
				this.loadData();
			},

			// 上拉加载更多
			loadMore() {
				this.page++;
				this.loading = true;
				this.isLoadMore = true
				this.loadData();
			},
		}
	}
</script>

<style>
	page {
		background-color: #F2F4F6;
	}
	.container {
		padding: 44rpx;
	}
	
	.list-item {
		margin-bottom: 32rpx;
		padding: 24rpx;
		border-radius: 24rpx; 
		background-color: #FFFFFF; 
	}
	
	.item-title {
		font-family: PingFang SC; 
		font-size: 32rpx; 
		font-weight: normal; 
		line-height: 48rpx;
		color: #000000;
	}
	
	.status-content {
		margin-top: 8rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.status-around {
		width: 12rpx;
		height: 12rpx;
		background-color: #32BB78;
		border-radius: 6rpx;
	}
	
	.status-text {
		margin-left: 8rpx;
		font-family: PingFang SC; 
		font-size: 28rpx; 
		font-weight: normal; 
		line-height: 36rpx; 
	}
	
	.item-line {
		margin-top: 24rpx;
		width: 100%;
		height: 2rpx;
		background-color: #EBEAEF;
	}
	
	.line-content {
		margin-top: 24rpx;
		height: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;	
	}
	
	.line-left {
		font-family: PingFang SC; 
		font-size: 28rpx; 
		font-weight: normal; 
		line-height: 28rpx;
		color: #000000;
		display: flex;
		align-items: center;
	}
	
	.line-right {
		font-family: PingFang SC; 
		font-size: 24rpx; 
		font-weight: normal; 
		line-height: 40rpx; 
		text-align: right;
	}
	
	.icon-image {
		width: 36rpx;
		height: 36rpx;
	}
	
	.info-content {
		padding: 0 32rpx; 
		height: 112rpx;
		font-family: PingFang SC; 
		font-size: 32rpx; 
		font-weight: normal; 
		line-height: 48rpx; 
		display: flex; 
		align-items: center;
	}

</style>
